import React, { memo, forwardRef, useImperativeHandle, useState, useEffect } from "react"
import doc from "../../assets/file-icon/doc.png";
import docx from "../../assets/file-icon/doc.png";
import pdf from "../../assets/file-icon/pdf.png";
import xsl from "../../assets/file-icon/xsl.png";
import xls from "../../assets/file-icon/xls.png";
import xlsx from "../../assets/file-icon/xlsx.png";
import ppt from "../../assets/file-icon/ppt.png";
import pptx from "../../assets/file-icon/ppt.png";
import txt from "../../assets/file-icon/txt.png";
import rtf from "../../assets/file-icon/rtf.png";
import tiff from "../../assets/file-icon/tiff.png";
import jpg from "../../assets/file-icon/jpg.png";
import jpeg from "../../assets/file-icon/jpg.png";
import png from "../../assets/file-icon/png.png";
import burn from "../../assets/file-icon/burn.png";
import copy from "../../assets/file-icon/copy.png";
import scan from "../../assets/file-icon/scan.png";
import defaultIcon from "../../assets/file-icon/default.png";
import './index.scss'
const FILETYPE = {
    doc,
    pdf,
    xsl,
    ppt,
    txt,
    rtf,
    tiff,
    xls,
    xlsx,
    jpg,
    jpeg,
    png,
    pptx,
    docx,
    et: xsl,
    defaultIcon,
}
const LdListItem = forwardRef((props: any, ref: any) => {
    const { taskItem = {}, paperParams = [], mode = 'print', showStatus = false, statusText = '审批中', index } = props
    const slotList = React.Children.toArray(props?.children)
    const progressSlot: Array<any> = []
    const topSlot: Array<any> = []
    const footerSlot: Array<any> = []
    slotList.map((item: any) => {
        const { slot } = item.props
        switch (slot) {
            case 'progress':
                progressSlot.push(item)
                break
            case 'top':
                topSlot.push(item)
                break
            default:
                footerSlot.push(item)
                break
        }
    })
    const [printParams, setPrintParams] = useState([])
    const loadFileIcon = (filetype: string) => {
        if (!filetype) {
            if (taskItem.taskType === 2) {
                return burn;
            }
        }
        if (mode === "burn") {
            return burn;
        } else if (mode === "copy") {
            return copy;
        } else if (mode === "scan") {
            return scan;
        } else {
            const type = filetype && filetype.replace('.', '')
            if (!type) {
                return defaultIcon;
            }
            const fileType = type.toLocaleLowerCase();
            if (FILETYPE.hasOwnProperty(fileType)) {
                return (FILETYPE as any)[fileType];
            } else {
                return doc;
            }
        }
    }
    useEffect(() => {
        const data = paperParams.map((item: any) => ({ ...item, value: taskItem[item.model] || "" }))
        setPrintParams(data)
    }, [paperParams])
    return (
        <>
            <div className="task-list-box flex-start">
                {
                    index ? <span className="indexName">{index}</span> : null
                }
                <img src={loadFileIcon(taskItem.fileType)} alt="" style={{ width: '70px', height: '70px' }} draggable={false} />
                {progressSlot.map((item: any, index: number) => {
                    return <div className="progress-box" key={index}>{item}</div>
                })}
                <div className="info-content">
                    <div className="info flex-between">
                        <div className="doc-info">
                            <div className="flex-between align-center mb-10">
                                <div className="title-content flex-start">
                                    <span className="title">{taskItem.title}</span>
                                    {
                                        showStatus ? <span className="task-status">{statusText}</span> : null
                                    }
                                </div>
                                <div>
                                    {topSlot.map((item: any, index: number) => {
                                        return <div key={index}>{item}</div>
                                    })}
                                </div>
                            </div>
                            <p className="time">{taskItem.createdTime || taskItem.filePrintTime}</p>
                        </div>
                    </div>
                    <div className="bottom flex-between">
                        <div className="paper flex-start">
                            {
                                printParams.map((item: any, index: number) => {
                                    return (
                                        <div key={index}>
                                            {item.label}: <span className="value" style={{ color: '#333' }}>{item.value}</span>
                                            {
                                                index !== paperParams.length - 1 ?
                                                    <span className="line">
                                                    </span> : null
                                            }

                                        </div>
                                    )
                                })
                            }
                        </div>
                        {footerSlot.map((item: any, index: number) => {
                            return <div key={index}>{item}</div>
                        })}
                    </div>
                </div>
            </div>
        </>
    )
})
export default memo(LdListItem)